<template>
  <up-picker
      :columns="columns"
      :show="isShow"
      close-on-click-overlay
      key-name="leaveName"
      @cancel="handleCancel"
      @close="handleClose"
      @confirm="handleConfirm"
  />
</template>
<script lang="ts" setup>
import {getHolidayBalancesByUserId} from "@/api/holidayBalance";
import {ref} from "vue";
import type HolidayBalanceResponse from "@/api/types/HolidayBalanceResponse";

const model = defineModel<string>("holidayToken")
const isShow = defineModel<boolean>("show")
const props = defineProps<{ userId: string }>()
const columns = ref<HolidayBalanceResponse[][]>([])

async function getData() {
  const {data} = await getHolidayBalancesByUserId(props.userId)
  if (data.data !== undefined) {
    columns.value.push(data.data)
  }
}

getData()

function closePicker() {
  isShow.value = false
}

function handleCancel() {
  closePicker()
}

function handleClose() {
  closePicker()
}

function handleConfirm({value}: { value: HolidayBalanceResponse[] }) {
  closePicker()
}
</script>
